<script setup>
// 父传子
defineProps({
  goods: {
    tppe: Object,
    default: () => {},
  },

  // 是否显示原价，划线的价格
  isLine: {
    type: Boolean,
    default: false,
  },
});

//子传父
const emit = defineEmits(["cellclick"]);
const cellClick = () => {
  emit("cellclick", "11111");
};
</script>

<template>
  <div @click="cellClick" class="goods-item">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
    <p class="name ellipsis">Nike</p>
    <p class="price">&yen;{{ 998 }}</p>

    <p v-if="isLine" class="price_line">&yen;{{ 1798 }}</p>
  </div>

  <!-- 使用路由跳转，要传参 -->
  <!-- <RouterLink to="/" class="goods-item">
    <img v-img-="goods.picture" />
    <p class="name ellipsis">{{ goods.name }}</p>
    <p class="desc ellipsis">{{ goods.desc }}</p>
    <p class="price">&yen;{{ goods.price }}</p>
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" alt="" />
    <p class="name ellipsis">Nike</p>
    <p class="price">&yen;{{ 998 }}</p>

    <p v-if="isLine" class="price_line">&yen;{{ 1798 }}</p>
  </RouterLink> -->
</template>

<style lang="scss" scoped>
.goods-item {
  display: block;
  width: 9rem;
  padding: 20px 30px;
  text-align: center;
  transition: all 0.5s;

  &:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
  }

  img {
    width: 6rem;
    height: 6rem;
  }

  //   p {
  //     padding-top: 6px;
  //   }

  .name {
    padding-top: 0.5rem;
    font-size: 0.875rem;
  }

  .desc {
    color: #999;
    height: 29px;
  }

  .price {
    color: var(--cp-color);
    font-size: 0.875rem;
  }

  // .price_line {
  //   // color: var(--cp-color);
  //   font-size: 0.75rem;
  //   text-decoration: line-through; /* 添加删除线 */
  // }
}
</style>
